import React, { useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router-dom';

import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { Button, Col, Form, Row, Space } from '@douyinfe/semi-ui';
import { PageStore } from '@shared/store/PageStore';
import { Company, CompanyType, IAdminStore } from '@shared/types';
import * as companyService from '../../services/company';
import Message from '@shared/components/Message';
import { useQuery } from '@shared/hooks';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form';

const companyTypeOptions = [
    { label:'有限责任公司', value: CompanyType.LIMIT },
    { label:'合伙企业', value: CompanyType.PARTNERSHIP }
];

type CompanyDetailFormValues = {
    id: string;
    name: string;
    address: string;
    city: string;
    province: string;
    registryTime?: Date;
    employeeNum: number;
    type?: CompanyType;
};

const defaultFormValues: CompanyDetailFormValues = {
    id: '',
    name: '',
    address: '',
    city: '',
    province: '',
    registryTime: undefined,
    employeeNum: 0,
    type: undefined,
};

class CompanyDetailStore extends PageStore<IAdminStore> {

    detail: Company;

    formApi: FormApi;

    setFormApi(formApi: FormApi) {
        this.formApi = formApi;
        this.updateFormValues();
    }

    updateFormValues() {
        const { formApi, detail } = this;
        if (formApi && detail) {
            formApi.setValues({
                // id: detail.id,
                // name: detail.name,
                // address: detail.address,
                // city: detail.city,
                // province: detail.province,
                // registryTime: detail.registryTime ? new Date(detail.registryTime) : undefined,
                // employeeNum: detail.employeeNum,
                id: detail.id,
                name: detail.name,
                address: detail.address,
                city: detail.city,
                province: detail.province,
                registryTime: detail.registryTime ? new Date(detail.registryTime) : undefined,
                employeeNum: detail.employeeNum,
                type: detail.type,
            });
        }
    }

    async load(id: string) {
        const detail = await companyService.query(id);
        this.detail = detail;
        this.updateFormValues();
    }

    async doSubmit({ name, address, city, province, registryTime, employeeNum, type }: CompanyDetailFormValues): Promise<void> {
        const company: Company = {
            id: this.detail.id,
            biz: this.detail.biz,
            name, 
            address, 
            city, 
            province, 
            registryTime: registryTime!.getTime(), 
            employeeNum, 
            type: type!
        };
        await companyService.update(company);
    }

}

const CompanyDetail: React.FC = (): JSX.Element => {
    const { search } = useLocation();
    const query = useQuery();
    const history = useHistory();
    const [viewStore] = useState<CompanyDetailStore>(new CompanyDetailStore());
    const { loading } = viewStore;

    useEffect(() => {
        viewStore.load(query.get("id") as string);
    }, [ search ]);

    return <div>
        <div className="flex justify-center">
            <div className="flex-1" style={{ maxWidth: 640 }}>
                <Form
                    initValues={defaultFormValues}
                    getFormApi={(formApi) => {
                        viewStore.setFormApi(formApi);
                    }}
                    onSubmit={async (values) => {
                        await viewStore.submit(values);
                        Message.success('公司更新成功');
                    }}
                    labelPosition="left"
                    labelAlign="right"
                    labelWidth={160}
                >
                    {/* <Row gutter={24}>
                        <Col span={24}>
                            <Form.Input
                                field="id"
                                label="id"
                                readonly
                            />
                        </Col>
                    </Row> */}

                    <Row gutter={24}>
                        <Col span={24}>
                            <Form.Input
                                field="id"
                                label="id"
                                readonly
                            />
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={24}>
                            <Form.Input
                                field="name"
                                label="公司名称"
                            />
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={24}>
                            <Form.Input
                                field="address"
                                label="地址"
                            />
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={24}>
                            <Form.Input
                                field="city"
                                label="城市"
                            />
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={24}>
                            <Form.Input
                                field="province"
                                label="省份"
                            />
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={24}>
                            <Form.DatePicker
                                field="registryTime"
                                label="注册时间"
                            />
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={24}>
                            <Form.Input
                                field="employeeNum"
                                label="员工人数"
                                type="number"
                            />
                        </Col>
                    </Row>
                    <Row gutter={24}>
                        <Col span={24}>
                            <Form.Select
                                field="type"
                                label="公司类型"
                                optionList={companyTypeOptions}
                            />
                        </Col>
                    </Row>

                    <Row className="mt-8">
                        <Col span={24} className="text-center">
                            <Space spacing="loose" >
                                <Button
                                    size="large"
                                    onClick={() => {
                                        history.replace('/company');
                                    }}
                                >
                                    返回上一级
                                </Button>
                                <Button
                                    theme='solid' type="primary"
                                    size="large"
                                    loading={loading}
                                    htmlType="submit"
                                >
                                    保存修改
                                </Button>
                            </Space>
                        </Col>
                    </Row>
                </Form>
            </div>
        </div>
    </div>;
};

export default observer(CompanyDetail);
